<!-- 机台-当前状态 -->
<template>
  <div class="container-app">
    <div class="row">
      <div
        style="
          width: 70px;
          height: 70px;
          border-radius: 4px;
          background: #00cc00;
          text-align: center;
          line-height: 70px;
          color: white;
        "
      >
        站点列表
      </div>
      <div class="q-ml-md" style="flex: 1">
        <div>站点</div>
        <div class="row items-center">
          <q-select
            dense
            square
            outlined
            v-model="type"
            class="q-mt-sm"
            style="width: 250px"
            :options="option"
          >
          </q-select>
          <q-select
            dense
            square
            outlined
            v-model="type2"
            class="q-mt-sm q-ml-xs"
            style="width: 250px"
            :options="option"
          >
          </q-select>
          <q-space />
          <q-btn
            label="站点设备"
            color="primary"
            size="md"
            class="q-mt-sm q-mr-md"
          />
          <q-btn
            label="导出"
            color="primary"
            size="md"
            class="q-mt-sm q-mr-md"
          />
          <q-select
            dense
            square
            outlined
            v-model="type3"
            class="q-mt-sm q-ml-xs"
            style="width: 150px"
            :options="option"
          ></q-select>
        </div>
      </div>
    </div>
    <q-table
      flat
      square
      bordered
      :rows="dataList"
      :columns="columns"
      class="q-mt-md"
      no-data-label="暂无数据"
      no-results-label="过滤器没有发现任何结果"
      row-key="name"
      v-model:pagination="pagination"
      hide-pagination
    >
      <!-- 表格的加载状态 -->
      <template v-slot:loading>
        <q-inner-loading showing color="grey" />
      </template>
      <!-- 无数据提示信息 -->
      <template v-slot:no-data="{ message }">
        <div class="full-width row flex-center text-accent q-gutter-sm">
          <span>{{ message }}</span>
        </div>
      </template>
      <!-- 表格头部 -->
      <template v-slot:header="props">
        <q-tr no-hover :props="props" class="headTr">
          <q-th v-for="col in props.cols" :key="col.name" :props="props">
            {{ col.label }}
          </q-th>
        </q-tr>
      </template>
      <!-- 表格主体 -->
      <template v-slot:body="props">
        <q-tr no-hover :props="props" class="tableTr" style="color: #666666">
          <q-td v-for="col in props.cols" :key="col.name" :props="props">
            <span v-html="col.value"></span>
          </q-td>
        </q-tr>
      </template>
    </q-table>
    <!-- 分页 -->
    <Pagination
      :pageSizes="['5条/页', '10条/页', '20条/页', '30条/页']"
      @updatePage="updatePage"
      @updateSizes="updateSizes"
      :pagination="pagination"
      @handlerRefresh="handlerRefresh"
    />
  </div>
</template>

<script>
import { defineComponent } from "vue";
import Pagination from "src/components/pagination";

export default defineComponent({
  name: "ceshi3",
  components: { Pagination },
  data() {
    return {
      type: "CYD2023135674",
      type2: "中国-北京-海淀 金隅智造工厂",
      type3: "中国-北京",
      option: [2019, 2021, 2022, 2023],
      dataList: [
        {
          idNum: 1,
          c1: "北京",
          c2: "张三",
          c3: "13654845126",
          c4: "个人",
          c5: "50",
          c6: "北京市海淀区金隅智造工厂N3",
        },
        {
          idNum: 2,
          c1: "北京",
          c2: "张三",
          c3: "13654845126",
          c4: "个人",
          c5: "50",
          c6: "北京市海淀区金隅智造工厂N3",
        },
        {
          idNum: 3,
          c1: "北京",
          c2: "张三",
          c3: "13654845126",
          c4: "个人",
          c5: "50",
          c6: "北京市海淀区金隅智造工厂N3",
        },
        {
          idNum: 4,
          c1: "北京",
          c2: "张三",
          c3: "13654845126",
          c4: "个人",
          c5: "50",
          c6: "北京市海淀区金隅智造工厂N3",
        },
      ],
      columns: [
        { name: "idNum", align: "left", label: "序号", field: "idNum" },
        {
          name: "c1",
          align: "left",
          label: "地区",
          field: "c1",
        },
        {
          name: "c2",
          align: "left",
          label: "单位名称",
          field: "c2",
        },
        {
          name: "c3",
          align: "left",
          label: "联系电话",
          field: "c3",
        },
        {
          name: "c4",
          align: "left",
          label: "单位性质",
          field: "c4",
        },
        {
          name: "c5",
          align: "left",
          label: "运行容量",
          field: "c5",
        },
        {
          name: "c6",
          align: "left",
          label: "地址",
          field: "c6",
        },
      ],
      pagination: {
        // 分页
        sortBy: "desc", // 列名
        descending: false, // 是否按照降序排序
        page: 1, // 页码（当前显示第几页的数据）
        rowsPerPage: 10, // 每页多少行
        rowsNumber: 10, // 共多少条
      },
    };
  },
  mounted() {},
  methods: {
    handlerRefresh() {
      this.handleResetSearch();
    },
    // 切换当前页数
    updatePage(val) {
      if (!val) return;
      this.pagination.page = val * 1;
      this.getTable();
    },
    // 切换每页的行数
    updateSizes(val) {
      this.pagination.rowsPerPage = parseFloat(val);
      this.getTable();
    },
    // 表头选择
    handleSelect() {
      this.visibleColumns = [];
      this.columns.forEach((item, index) => {
        if (index < 9) {
          this.visibleColumns.push(item.name);
        }
      });
    },
  },
});
</script>

<style lang="scss" scoped></style>
